<!-- 查询面板 -->
<template>
  <div class=''>
    <div style="margin-top: 15px;">
      <el-input v-model="search" suffix-icon="el-icon-search" class="input-with-select" placeholder="请输入查询地址">
      </el-input>
    </div>

    <el-collapse class="coll-panel" accordion v-model="activeNames" @change="handleChange">
      <el-collapse-item class="collitem" title="资产状况" name="1">
        <div class="display:block">房屋类型
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.RoomProperty">
            <el-radio-button @click.native="cancelChose(item,'RoomProperty')" v-for="(item,index) in typeData.RoomInfo.RoomProperty" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">资产结构
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.Structure">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.Structure" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">资产分类
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.SecurityRegion">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.SecurityRegion" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">管理分区
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.Region">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.Region" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">房屋等级(D\B\A)
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.DangerClassification">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.DangerClassification" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
      </el-collapse-item>
      <el-collapse-item class="collitem" title="经营状况" name="2">
        <div class="display:block">出租情况
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.State">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.State" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">已出租的资产性质
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.LeasedAssets">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.LeasedAssets" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">经营项目
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.ChartInfo.FareItem">
            <el-radio-button v-for="(item,index) in typeData.ChartInfo.FareItem" :key="index" :label="item"> </el-radio-button>
          </el-radio-group>
        </div>
      </el-collapse-item>
      <el-collapse-item class="collitem" title="产权/财务状况" name="3">
        <div class="display:block">抵押情况
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.Mortgage">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.Mortgage" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">办证情况
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.Registration">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.Registration" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
        <div class="display:block">房屋来源
          <el-radio-group v-if="JSON.stringify(typeData)!='{}'" size="mini" v-model="type.RoomInfo.BeFrom">
            <el-radio-button v-for="(item,index) in typeData.RoomInfo.BeFrom" :key="index" :label="item"></el-radio-button>
          </el-radio-group>
        </div>
      </el-collapse-item>
      <el-collapse-item class="collitem" title="租金状态" name="4">
        <el-select v-if="JSON.stringify(typeData)!='{}'" style="width:100%;" v-model="type.ChartInfo.Rent" placeholder="请选择房屋租金">
          <el-option v-for="(item,index) in typeData.ChartInfo.Rent" :key="index" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-collapse-item>
    </el-collapse>
    <div class="btn">
      <el-button type="default" @click="reset">重 置</el-button>
      <el-button type="primary" @click="handleSearchContent">查 询</el-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import {
  getWetchatAllUsers,
  getAllCheckByOpenId,
  getHouseAndAssetTypes,
  getAssetByCondition
} from "@/api/map";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      search: "",
      checkList: [],
      checkList1: [],
      checkList2: [],
      allWechatUser: [],
      activeNames: ["1"],
      patrol: {
        openId: "",
        allWechatUserDate: null
      },
      typeData: {},
      type: { RoomInfo: {}, ChartInfo: {} }
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    cancelChose(item, type) {},
    handleQuery() {
      let data = {
        openId: this.patrol.openId,
        datepicker: this.patrol.allWechatUserDate[0],
        datepicker2: this.patrol.allWechatUserDate[1]
      };
      getAllCheckByOpenId(data).then(res => {});
    },
    handleSearch() {
      // console.log("查询", this.search);
      // let data = this.type;
      // data.RoomInfo.address = this.search;
      // this.$emit("search", data);
    },
    handleSearchContent() {
      console.log("searchdata", this.type);
      this.type.RoomInfo.address = this.search;
      let data = { data: this.type };
      getAssetByCondition(this.type).then(res => {
        this.$emit("checkList", res);
      });
      //查询条件传到列表页 !
      this.$emit("search", this.type);
    },
    reset() {
      this.type = { RoomInfo: {}, ChartInfo: {} };
    },
    handleChange(val) {
      console.log(val);
    },
    initType() {
      getHouseAndAssetTypes().then(res => {
        console.log("typedata", res);
        this.$nextTick(() => {
          this.typeData = res;
          this.typeData.RoomInfo.Registration = [
            "未办证",
            "单土地证",
            "单房产证",
            "双证齐全",
            "不动产权证"
          ];
          this.typeData.RoomInfo.RentNature = ["营业", "住宅", "土地", "全部"];
          this.typeData.RoomInfo.Mortgage = ["已抵押", "未抵押"];
          this.typeData.ChartInfo.Rent = [
            {
              value: "0",
              label: "全部"
            },
            {
              value: "1",
              label: "0-100"
            },
            {
              value: "2",
              label: "100-500"
            },
            {
              value: "3",
              label: "500-1000"
            },
            {
              value: "4",
              label: "1000-3000"
            },
            {
              value: "5",
              label: "3000-5000"
            },
            {
              value: "6",
              label: "5000-10000"
            },
            {
              value: "7",
              label: ">10000"
            }
          ];
        });
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.initType();
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
// .el-tabs--left {
//   background-color: #8abdf1 !important;
//   .el-tabs__header.is-left {
//     background-color: #fff !important;
//   }
// }
.input-with-select {
  margin-bottom: 10px;
}
.coll-panel {
  height: calc(100vh - 280px);
  overflow: auto;
}
.footer {
  display: block;
  margin: 10px 10px 10px 0px;
  text-align: right;
}
.el-collapse-item__content {
  padding-bottom: 10px !important;
}
.search-btn {
  background: #409eff !important;
  color: #fff !important;
}
.collitem {
  margin: 20px;
  div {
    margin-bottom: 10px;
    font-weight: bold;
  }
}
.el-radio-group {
  width: 100% !important;
  margin-bottom: 30px;
  .el-radio-button {
    // width: 25% !important;
    margin-top: 5px;
    margin-right: 10px;
  }
}
.btn {
  float: right;
  margin: 20px;
}
</style>